<script setup>
import { ref } from 'vue'
import CateSelect from '@/views/cateSelect.vue'
import { Plus } from '@element-plus/icons-vue'
import { useArticleAddServices, useArticleGetServices } from '@/api/article.js'
import { blobToFile, dataURLtoBlob } from '@/utils/imgUtil.js'
import { ElMessage } from 'element-plus'
const title = ref('')
const drawerOpen = ref(false)
const formData = ref({
  title: '',
  categoryId: '',
  state: '',
  content: '我是内容，内容是我~~~~~~~~',
  coverImg: ''
})
const updateCategoryId = (value) => {
  formData.value.categoryId = value
}
const imageUrl = ref('')
const emit = defineEmits(['updateArticle'])
const confirmClick = async (state) => {
  formData.value.state = state
  await useArticleAddServices(formData.value)
  drawerOpen.value = false
  emit('updateArticle', 'add')
  ElMessage.success('操作成功')
  formData.value = {
    title: '',
    categoryId: '',
    state: '',
    content: '我是内容，内容是我~~~~~~~~',
    coverImg: ''
  }
  imageUrl.value = ''
}
const open = async (data) => {
  drawerOpen.value = true
  if (data.id) {
    title.value = '修改文章'
    let res = await useArticleGetServices(data.id)
    console.log(res.data)
    formData.value = { ...res.data }
    // 将base64编码转换为blob对象
    const blob = dataURLtoBlob(res.data.coverImg)
    // 将blob对象转换为File对象
    const file = blobToFile(blob, 'img.png')
    // 创建一个URL对象，用于获取图片的URL
    imageUrl.value = URL.createObjectURL(file)
  } else {
    formData.value = {
      title: '',
      categoryId: '',
      state: '',
      content: '我是内容，内容是我~~~~~~~~',
      coverImg: ''
    }
    imageUrl.value = ''
    title.value = '新增文章'
  }
}
const onImgUpload = (uploadFile) => {
  if (uploadFile.raw.type !== 'image/png') {
    ElMessage.error('请重新上传png格式的图片')
    return
  }
  if (uploadFile.raw.size > 1024 * 1024 * 2) {
    ElMessage.error('图片大小不能超过2M')
    return
  }
  console.log(uploadFile.raw)
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
  console.log(imageUrl.value)
  // 获取上传图片的base64编码
  const reader = new FileReader()
  reader.readAsDataURL(uploadFile.raw)
  reader.onload = function () {
    formData.value.coverImg = reader.result
  }
}
defineExpose({
  open
})
</script>

<template>
  <el-drawer v-model="drawerOpen" size="50%">
    <template #header
      ><h3>{{ title }}</h3></template
    >
    <template #default>
      <el-form :model="formData">
        <el-form-item label="文章标题:">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="文章分类:">
          <template #default>
            <cate-select
              v-model="formData.categoryId"
              @update:modelValue="updateCategoryId"
              width="100%"
            />
          </template>
        </el-form-item>
        <el-form-item label="文章封面:">
          <template #default>
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="onImgUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </template>
        </el-form-item>
        <el-form-item label="文章内容:">
          <el-input v-model="formData.content" type="textarea" autosize />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto; justify-content: flex-start; display: flex">
        <el-button @click="confirmClick('草稿')">草稿</el-button>
        <el-button type="primary" @click="confirmClick('已发布')">发布</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
